<template>
  <div class="statistics page-main">
    <CustomForm :formInline="form" @onSubmit="onSubmit" @resetTable="resetTable" :showAction="false">
      <!-- <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="输入姓名"></el-input>
      </el-form-item>-->
      <el-form-item label="所属区域">
        <el-select v-model="form.area" placeholder="选择所属区域" @change="changeStatusSelect">
          <el-option label="安阳总公司" :value="0"></el-option>
          <el-option label="安徽分公司" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="日期">
        <el-date-picker
          v-model="pickerData"
          @change="pickerChange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>-->
    </CustomForm>
    <div class="tool">
      <el-button type="primary" @click="showCompanyList">{{
        form.area == 0 ? '统计安阳总公司' : '统计安徽分公司'
        }}</el-button>
    </div>
    <el-table border :data="tableData" style="width: 100%" height="650">
      <el-table-column prop="company_name" label="公司名" align="center"></el-table-column>
      <el-table-column prop="add_date_time" label="日期" align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showCompanyData(scope.row)">数据详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="15"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog class="dataDialog" :title="form.area == 0 ? '安阳总公司数据详情' :'安徽分公司数据详情'" :visible.sync="dialogVisible" width="60%" top="5vh">
      <CompanyData v-if="dialogVisible" :date="date" :form="form"/>
    </el-dialog>

    <el-dialog class="dataDialog" title="统计公司" :visible.sync="dialogVisible2" width="60%" top="5vh">
      <StatisticsCompany v-if="dialogVisible2" :form="form" />
    </el-dialog>
  </div>
</template>

<script>
import { resourceStatistics } from "@/api/set";
import CompanyData from "./components/CompanyData";
import StatisticsCompany from "./components/StatisticsCompany";
export default {
  name: "statistics",
  components: {
    CompanyData,
    StatisticsCompany
  },
  data() {
    return {
      form: {
        area: 0,
      },
      dialogVisible: false,
      dialogVisible2:false,
      currentPage: 1,
      total: 0,
      date: "",
      tableData: []
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      let result = await resourceStatistics({
        page: this.currentPage,
        area: this.form.area
      });
      if (result.code == 200) {
        this.tableData = result.data.list;
        this.total = result.data.total;
      }
    },
    onSubmit() {
      this.initial();
    },
    resetTable() {
      this.form = {
        area:1
      };
      this.initial();
    },
    changeStatusSelect(val){
      // console.log("2222",val)
      this.initial();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.initial();
    },
    showCompanyData(row) {
      this.date = row.add_date_time;
      this.dialogVisible = true;
    },
    showCompanyList(){
      this.dialogVisible2 = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics {
  background: #fff;
  height: 100%;
  .tool {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
  .block {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .dataDialog {
    ::v-deep .el-dialog {
      height: 85vh;
      overflow: auto;
    }
  }
}
</style>
